import { createStore } from "vuex";
import vuexPer from "vuex-persistedstate";
export default createStore({
  state: {
    shopcar: [],
    //购物车数据
    checked: false,
    //全选按钮的状态
  },
  mutations: {
    add(state, val) {
      let flag = false;
      state.shopcar.forEach((item) => {
        if (item._id == val._id) {
          item.num++;
          flag = true;
        }
      });

      if (flag == false) {
        val.num = 1;
        val.status = false;
        state.shopcar.push(val);
      }
      //如果循环结束flag都没有变成true 也就证明这个商品不存在 那么就给一个num为1 status是false（为了以后的选中全选反选效果） 把这条数据push进购物车数据
    },

    checkItem(state) {
      state.checked = state.shopcar.every((item) => item.status == true);
      // 当只有一行代码的时候可以省略大括号和return
    },
    //点击上面的复选框 控制全选按钮

    checkall(state) {
      state.shopcar.forEach((item) => {
        item.status = state.checked;
      });
    },
    //点击全选按钮 控制上面的数据的status状态
    clear(state) {
      state.shopcar = state.shopcar.filter((item) => item.status == false);
    },
    //选中删除把没选中也就是不删留下来 状态是false也就意味着不删除
  },
  actions: {},
  modules: {},
  getters: {
    allPrice(state) {
      let all = 0;
      state.shopcar.forEach((item) => {
        if (item.status == true) {
          all += item.num * item.price;
        }
      });
      return all;
    },
    //计算选中的商品的总结
  },

  plugins: [vuexPer()],
});
